import React, {Component, PropTypes, message} from 'react'
import {Table, Card, Icon} from 'antd'
import Styles from './../Index.less'
import {fetchPost} from './../../../../../utils/request'


class HighmarkReport extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tradeNo: props.tradeNo,
      scoreList: [],
      addressVariationRecords: [],
      panVariationRecords: [],
      drivingLicenseVariationRecords: [],
      uidVariationRecords: [],
      otherIDVariationRecords: [],
      dateOfBirthVariationRecords: [],
      phoneNumberVariationRecords: [],
      emailVariationRecords: [],
      employmentDetails: [],
      loanDetailRecords: [],
    }
  }

  componentDidMount() {
    this.getData()
  }

  componentWillReceiveProps(props) {
    if (this.state.tradeNo !== props.tradeNo) {
      this.setState({
        tradeNo: props.tradeNo,
      }, () => {
        this.getData()
      })
    }
  }

  componentWillUnmount() {

  }

  getData() {
    if (this.state.tradeNo !== null) {
      fetchPost(`/audit/highmark/report/get`, {
        tradeNo: this.state.tradeNo
      }).then(json => {
        if (json.code === 0 && json.data != null) {
          this.setState({
            scoreList: json.data.scoreList,
            addressVariationRecords: json.data.addressVariationRecords,
            panVariationRecords: json.data.panVariationRecords,
            drivingLicenseVariationRecords: json.data.drivingLicenseVariationRecords,
            uidVariationRecords: json.data.uidVariationRecords,
            otherIDVariationRecords: json.data.otherIDVariationRecords,
            dateOfBirthVariationRecords: json.data.dateOfBirthVariationRecords,
            phoneNumberVariationRecords: json.data.phoneNumberVariationRecords,
            emailVariationRecords: json.data.emailVariationRecords,
            employmentDetails: json.data.employmentDetails,
            loanDetailRecords: json.data.loanDetailRecords,
          })
        } else {
          this.setState({
            scoreList: [],
            addressVariationRecords: [],
            panVariationRecords: [],
            drivingLicenseVariationRecords: [],
            uidVariationRecords: [],
            otherIDVariationRecords: [],
            dateOfBirthVariationRecords: [],
            phoneNumberVariationRecords: [],
            emailVariationRecords: [],
            employmentDetails: [],
            loanDetailRecords: [],
          })
        }
      })
    }
  }

  message() {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  createContent(dataList) {
    let self = this
    let content = []
    if (dataList != null && dataList.length > 0) {
      dataList.map(function (item) {
        let value = item.value
        if (value == null) {
          value = '--'
        }
        content.push(
          <div key={item.name} className={Styles.content}>
            <span style={{width: '20%'}}>{item.name}</span>
            :
            <span style={{width: '80%', paddingLeft: 5}}>{value}</span>
          </div>)
      })
    }
    return content
  }

  render() {
    let self = this

    const columns = [
      {
        title: 'VALUE',
        key: 'VALUE',
        dataIndex: 'VALUE'
      },
      {
        title: 'REPORTED-DATE',
        key: 'REPORTED-DATE',
        dataIndex: 'REPORTED-DATE'
      }
    ]

    const loanColumns = [
      {
        title: 'ACCT-NUMBER',
        key: 'ACCT-NUMBER',
        dataIndex: 'ACCT-NUMBER'
      },
      {
        title: 'CREDIT-GUARANTOR',
        key: 'CREDIT-GUARANTOR',
        dataIndex: 'CREDIT-GUARANTOR'
      },
      {
        title: 'ACCT-TYPE',
        key: 'ACCT-TYPE',
        dataIndex: 'ACCT-TYPE'
      },
      {
        title: 'DATE-REPORTED',
        key: 'DATE-REPORTED',
        dataIndex: 'DATE-REPORTED'
      },
      {
        title: 'OWNERSHIP-IND',
        key: 'OWNERSHIP-IND',
        dataIndex: 'OWNERSHIP-IND'
      },
      {
        title: 'ACCOUNT-STATUS',
        key: 'ACCOUNT-STATUS',
        dataIndex: 'ACCOUNT-STATUS'
      },
      {
        title: 'DISBURSED-AMT',
        key: 'DISBURSED-AMT',
        dataIndex: 'DISBURSED-AMT'
      },
      {
        title: 'DISBURSED-DT',
        key: 'DISBURSED-DT',
        dataIndex: 'DISBURSED-DT'
      },
      {
        title: 'LAST-PAYMENT-DATE',
        key: 'LAST-PAYMENT-DATE',
        dataIndex: 'LAST-PAYMENT-DATE'
      },
      {
        title: 'CLOSED-DATE',
        key: 'CLOSED-DATE',
        dataIndex: 'CLOSED-DATE'
      },
      {
        title: 'OVERDUE-AMT',
        key: 'OVERDUE-AMT',
        dataIndex: 'OVERDUE-AMT'
      },
      {
        title: 'WRITE-OFF-AMT',
        key: 'WRITE-OFF-AMT',
        dataIndex: 'WRITE-OFF-AMT'
      },
      {
        title: 'CURRENT-BAL',
        key: 'CURRENT-BAL',
        dataIndex: 'CURRENT-BAL'
      },
      {
        title: 'COMBINED-PAYMENT-HISTORY',
        key: 'COMBINED-PAYMENT-HISTORY',
        dataIndex: 'COMBINED-PAYMENT-HISTORY'
      },
      {
        title: 'MATCHED-TYPE',
        key: 'MATCHED-TYPE',
        dataIndex: 'MATCHED-TYPE'
      },
      {
        title: 'LINKED-ACCOUNTS',
        key: 'LINKED-ACCOUNTS',
        dataIndex: 'LINKED-ACCOUNTS'
      },
      {
        title: 'SECURITY-DETAILS',
        key: 'SECURITY-DETAILS',
        dataIndex: 'SECURITY-DETAILS'
      }
    ]

    return (
      <div className={Styles.detailModule}>
        <Card title='Score' bordered={false} noHovering={true}>
          {this.createContent(this.state.scoreList)}
        </Card>
        <Card title='Address-Variation Records' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.addressVariationRecords}
                 bordered
          />
        </Card>
        <Card title='Pan-Variation Records' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.panVariationRecords}
                 bordered
          />
        </Card>
        <Card title="Driving-License-Variation Records" bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.drivingLicenseVariationRecords}
                 bordered
          />
        </Card>
        <Card title='UID-Variation Records' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.uidVariationRecords}
                 bordered
          />
        </Card>
        <Card title='Other-ID-Variation Records' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.otherIDVariationRecords}
                 bordered
          />
        </Card>
        <Card title='Date-of-Birth-Variation Records' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.dateOfBirthVariationRecords}
                 bordered
          />
        </Card>
        <Card title='Phone-Number-Variation Records' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.phoneNumberVariationRecords}
                 bordered
          />
        </Card>
        <Card title='Email-Variation Records' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.emailVariationRecords}
                 bordered
          />
        </Card>
        <Card title='Employment-Details' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={columns}
                 dataSource={this.state.employmentDetails}
                 bordered
          />
        </Card>
        <Card title='Loan-Detail Records' bordered={false} noHovering={true}>
          <Table pagination={false}
                 size='small'
                 key='VALUE'
                 columns={loanColumns}
                 dataSource={this.state.loanDetailRecords}
                 bordered
          />
        </Card>
      </div>
    )
  }
}

export default HighmarkReport
